<template>
  <div class="view-img">
    <el-upload v-model:file-list="files" action="#" list-type="picture-card" :auto-upload="false"
      :on-preview="handlePictureCardPreview" />
    <Dialog v-model="dialogVisible" width="1000" title="图片预览">
      <img w-full :src="dialogImageUrl" alt="Preview Image" width="100%" />
      <template #footer>
        <span @click="dialogVisible = false" class='btn'>关 闭</span>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { UploadProps } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { getAccessToken } from '@/utils/auth'
const dialogVisible = ref(false)
const files = ref([] as any)
const dialogImageUrl = ref('')

const props = defineProps({
  fileList: propTypes.array.def([])
})

watch(
  () => props.fileList,
  () => {
    nextTick(() => {
      if (!props.fileList.length) return
      files.value = props.fileList.map((item: any) => {
        return {
          name: item.name,
          url: item.url
        }
      })
    })
  },
  {
    deep: true,
    immediate: true
  }
)

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
onMounted(() => {
  nextTick(() => {
    if (!props.fileList.length) return
    files.value = props.fileList.map((item: any) => {
      return {
        name: item.name,
        url: item.url
      }
    })
  })
})
</script>
<style scoped lang="scss">
.view-img {
  :deep(.el-upload-list__item-delete) {
    display: none!important;
  }
  :deep(.el-overlay-dialog){
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .btn {
    margin: 0 5px;
    display: inline-block;
    cursor: pointer;
    height: 30px;
    line-height: 8px;
    padding: 10px 13px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
      outline: 0;
    }
  }

  :deep(.el-upload--picture-card) {
    display: none;
  }

  :deep(.el-dialog) {
    margin: auto !important;

    .el-dialog__body {
      display: flex;
      justify-content: center;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  // .fullscreen {
  //   background: #fff;
  //   position: fixed !important;
  //   left: 5% !important;
  //   top: 5% !important;
  //   width: 90% !important;
  //   height: 85% !important;
  //   object-fit: contain !important;
  //   z-index: 9999 !important;
  //   text-align: center;
  // }

  // .close-button {
  //   position: absolute;
  //   top: -3%;
  //   right: -1.5%;
  //   background-color: rgba(0, 0, 0, 0.5);
  //   color: white;
  //   border: none;
  //   padding: 8px 11px;
  //   cursor: pointer;
  //   border-radius: 50%;
  //   z-index: 3000000;
  //   font-size: 18px;
  //   line-height: 18px;
  // }
}
</style>
